<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量添加部门</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #fffafa; /* 浅粉色背景 */
            padding-top: 20px;
        }
        .card {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 1px solid #ffc2c4; /* 浅粉色边框 */
            border-radius: 8px;
        }
        .card-header {
            font-weight: bold;
            background-color: #ff6b81; /* 粉红色背景 */
            color: white;
            border-radius: 8px 8px 0 0;
            padding: 12px 20px;
            font-size: 16px;
        }
        .card-body {
            padding: 20px;
            background-color: #fffafa; /* 浅粉色背景 */
        }
        .form-label {
            color: #ff6b81; /* 粉红色文字 */
            font-weight: 500;
        }
        .btn-primary {
            background-color: #ff6b81; /* 粉红色按钮 */
            border-color: #ff6b81;
            color: white;
        }
        .btn-primary:hover {
            background-color: #e55a6e; /* 悬停时加深 */
            border-color: #e55a6e;
        }
        .btn-outline-success {
            color: #ff6b81; /* 粉红色文字 */
            border-color: #ff6b81;
        }
        .btn-outline-success:hover {
            background-color: #ff6b81; /* 悬停时填充 */
            border-color: #ff6b81;
            color: white;
        }
        .alert-danger {
            background-color: #ffebee; /* 浅红色背景 */
            border-color: #ffcdd2;
            color: #c62828;
        }
        .alert-warning {
            background-color: #fff8e1; /* 浅黄色背景 */
            border-color: #ffecb3;
            color: #f57f17;
        }
        .alert-success {
            background-color: #e8f5e9; /* 浅绿色背景 */
            border-color: #c8e6c9;
            color: #2e7d32;
        }
        .alert-info {
            background-color: #e3f2fd; /* 浅蓝色背景 */
            border-color: #bbdefb;
            color: #1565c0;
        }
        .table-example {
            border: 1px solid #ffc2c4; /* 浅粉色边框 */
        }
        .table-example th {
            background-color: #ff6b81; /* 粉红色表头 */
            color: white;
        }
        .table-example td, .table-example th {
            border: 1px solid #ffc2c4; /* 浅粉色边框 */
        }
        .form-control, .form-select {
            border: 1px solid #ffc2c4; /* 浅粉色边框 */
            border-radius: 5px;
            padding: 10px;
        }
        .form-control:focus, .form-select:focus {
            border-color: #ff6b81; /* 粉红色聚焦边框 */
            box-shadow: 0 0 0 0.2rem rgba(255, 107, 129, 0.25);
        }
        hr {
            border-top: 1px solid #ffc2c4; /* 浅粉色分隔线 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">批量添加部门</h5>
                    </div>
                    <div class="card-body">
                        <!-- 错误提示 -->
                        {% if error_message %}
                        <div class="alert alert-danger" role="alert">
                            <strong>错误：</strong> {{ error_message }}
                        </div>
                        {% endif %}

                        <!-- 警告提示 -->
                        {% if warning_message %}
                        <div class="alert alert-warning" role="alert">
                            <strong>部分成功：</strong> {{ warning_message|safe }}
                        </div>
                        {% endif %}

                        <!-- 成功提示 -->
                        {% if success_message %}
                        <div class="alert alert-success" role="alert">
                            <strong>成功：</strong> {{ success_message }}
                        </div>
                        {% endif %}

                        <!-- 文件上传表单 -->
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}

                            <div class="mb-4">
                                <label for="excelFile" class="form-label">选择Excel文件</label>
                                <input class="form-control form-control-lg" type="file" id="excelFile" name="excel_file" accept=".xlsx" required>
                                <div class="form-text">请上传.xlsx格式的Excel文件，文件大小不超过5MB</div>
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                                <button type="submit" class="btn btn-primary btn-lg me-md-2">
                                    <i class="bi bi-upload"></i> 上传并导入
                                </button>
                                <a href="{% url 'dept_list' %}" class="btn btn-secondary btn-lg">
                                    <i class="bi bi-arrow-left"></i> 返回部门列表
                                </a>
                            </div>
                        </form>

                        <hr class="my-4">

                        <!-- Excel模板说明 -->
                        <div class="mt-4">
                            <h5 class="mb-3" style="color: #ff6b81;">Excel文件格式说明</h5>

                            <div class="alert alert-info">
                                <p class="mb-2"><strong>文件要求：</strong></p>
                                <ul class="mb-0">
                                    <li>第一行应为标题行，请不要修改</li>
                                    <li>第二行开始为部门数据</li>
                                    <li>请确保部门名称和位置不为空</li>
                                    <li>文件扩展名必须为 .xlsx</li>
                                </ul>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-example">
                                    <thead>
                                        <tr>
                                            <th>部门名称</th>
                                            <th>部门位置</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>技术部</td>
                                            <td>3楼东区</td>
                                        </tr>
                                        <tr>
                                            <td>市场部</td>
                                            <td>2楼西区</td>
                                        </tr>
                                        <tr>
                                            <td>财务部</td>
                                            <td>1楼北区</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                                <a href="{% url 'download_dept_template' %}" class="btn btn-outline-success">
                                    <i class="bi bi-download"></i> 下载Excel模板
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</body>
</html>